<template>
    <div class="qrCode" :id="el"></div>
</template>
<script setup>
import QRCode from 'qrcodejs2-fix'
import { computed, onMounted, nextTick, watch } from 'vue'

const props = defineProps({
    el: {
        type: String,
        required: true
    },
    options: {
        type: Object,
        required: false
    },
    width: {
        type: String,
        default: 150
    },
    height: {
        type: String,
        default: 150
    }
})
const currentEl = computed(() => props.el)

onMounted(() => {
    nextTick(() => {
        autQRCode()
    })
})

const autQRCode = () => {
    const text = props.el
    const width = props.width
    const height = props.height
    const colorDark = '#333333'
    const colorLight = '#ffffff'
    const correctLevel = QRCode.CorrectLevel.L
    const qrcode = new QRCode(currentEl.value, {
        text,
        width,
        height,
        colorDark, //二维码颜色
        colorLight, //二维码背景色
        correctLevel //容错率，L/M/H})
    })
    return qrcode.value
}
</script>
  